<!doctype html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>chrome://serviceworker-internals</title>
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <link rel="stylesheet" href="chrome://resources/css/widgets.css">
  <link rel="stylesheet" href="serviceworker_internals.css">
</head>
<body>
  <!-- templates -->
  <div style="display:none">
    <div id="serviceworker-version-template" class="serviceworker-version">
      <div class="serviceworker-status">
        <span>Installation Status:</span>
        <span jscontent="$this.status"></span>
      </div>
      <div class="serviceworker-running-status">
        <span>Running Status:</span>
        <span jscontent="$this.running_status"></span>
      </div>
      <div class="serviceworker-fetch-handler-existence">
        <span>Fetch handler existence:</span>
        <span jscontent="$this.fetch_handler_existence"></span>
      </div>
      <div class="serviceworker-fetch-handler-type">
        <span>Fetch handler type:</span>
        <span jscontent="$this.fetch_handler_type"></span>
      </div>
      <div class="serviceworker-script_url">
        <span>Script:</span>
        <span jscontent="$this.script_url"></span>
      </div>
      <div class="serviceworker-vid">
        <span>Version ID:</span>
        <span jscontent="$this.version_id"></span>
      </div>
      <div class="serviceworker-pid">
        <span>Renderer process ID:</span>
        <span jscontent="$this.process_id"></span>
      </div>
      <div class="serviceworker-tid">
        <span>Renderer thread ID:</span>
        <span jscontent="$this.thread_id"></span>
      </div>
      <div class="serviceworker-rid">
        <span>DevTools agent route ID:</span>
        <span jscontent="$this.devtools_agent_route_id"></span>
      </div>
      <div class="serviceworker-clients" jsselect="$this.clients">
        <div>Client: </div>
        <div transclude="serviceworker-client-template"></div>
      </div>
      <div>
        <div>Log:</div>
        <textarea class="serviceworker-log"
            jsvalues=".partition_id:$partition_id;.version_id:$this.version_id"
            rows="3" cols="120" readonly jscontent="$this.log"></textarea>
      </div>
      <div class="worker-controls">
        <button href="#" class="stop"
            jsvalues=".cmdArgs:{partition_id:$partition_id,version_id:version_id}"
            jsdisplay="$this.running_status == 'RUNNING'">Stop</button>
        <button href="#" class="inspect"
            jsvalues=".cmdArgs:{process_host_id:process_host_id,devtools_agent_route_id:devtools_agent_route_id}"
            jsdisplay="$this.running_status == 'RUNNING'">Inspect</button>
        <span class="operation-status" style="display: none">Running...</span>
      </div>
    </div>
    <div id="serviceworker-registration-template"
        class="serviceworker-registration">
      <div class="serviceworker-scope">
        <span>Scope:</span>
        <span jscontent="scope"></span>
      </div>
      <!-- Storage Partitioning -->
      <div class="serviceworker-storage-key-wrapper"
        jsdisplay="$this.third_party_storage_partitioning_enabled">
        Storage key:
        <div class="serviceworker-storage-key">
          <div class="serviceworker-origin"
            jsdisplay="$this.ancestor_chain_bit == 'CrossSite'">
            <span>origin:</span>
            <span jscontent="$this.origin"></span>
          </div>
          <div class="serviceworker-top-level-site"
            jsdisplay="$this.ancestor_chain_bit == 'CrossSite'">
            <span>Top level site:</span>
            <span jscontent="$this.top_level_site"></span>
          </div>
          <div class="serviceworker-ancestor-chain-bit">
            <span>Ancestor chain bit:</span>
            <span jscontent="$this.ancestor_chain_bit"></span>
          </div>
          <div class="serviceworker-nonce"
            jsdisplay="$this.ancestor_chain_bit == 'CrossSite'">
            <span>nonce:</span>
            <span jscontent="$this.nonce"></span>
          </div>
        </div>
      </div>
      <!-- Storage Partitioning ends -->
      <div class="serviceworker-rid">
        <span>Registration ID:</span>
        <span jscontent="registration_id"></span>
        <span jsdisplay="$this.unregistered">(unregistered)</span>
      </div>
      <div class="serviceworker-navigation-preload-enabled">
        <span>Navigation preload enabled:</span>
        <span jscontent="$this.navigation_preload_enabled"></span>
      </div>
      <div class="serviceworker-navigation-preload-header-length">
        <span>Navigation preload header length:</span>
        <span jscontent="$this.navigation_preload_header_length"></span>
      </div>
      <div jsselect="$this.active">
        Active worker:
        <div transclude="serviceworker-version-template"></div>
      </div>
      <div jsselect="$this.waiting">
        Waiting worker:
        <div transclude="serviceworker-version-template"></div>
      </div>
      <div class="registration-controls" jsdisplay="!$this.unregistered">
        <button href="#" class="unregister"
            jsvalues=".cmdArgs:{partition_id:$partition_id,scope:scope,storage_key:storage_key}">
          Unregister
        </button>
        <button href="#" class="start"
            jsdisplay="$this.active.running_status != 'RUNNING'"
             jsvalues=".cmdArgs:{partition_id:$partition_id,scope:scope,storage_key:storage_key}">
          Start
        </button>
        <span class="operation-status" style="display: none">Running...</span>
      </div>
    </div>
    <div id="serviceworker-list-template"
        jsvalues="$partition_id:$this.partition_id;.partition_id:$this.partition_id"
        jsdisplay="$this.stored_registrations.length + $this.unregistered_registrations.length + $this.unregistered_versions.length > 0">
      <div class="serviceworker-summary">
        <span jsdisplay="$this.partition_path">
          <span>Registrations in: </span>
          <span jscontent="$this.partition_path"></span>
        </span>
        <span jsdisplay="!$this.partition_path">
          <span>Registrations: Incognito </span>
        </span>
        <span jscontent="'(' + $this.stored_registrations.length + ')'"></span>
      </div>
      <div class="serviceworker-item" jsselect="$this.stored_registrations">
        <div transclude="serviceworker-registration-template"></div>
      </div>
      <div class="serviceworker-item"
          jsselect="$this.unregistered_registrations">
        <div transclude="serviceworker-registration-template"></div>
      </div>
      <div class="serviceworker-item" jsselect="$this.unregistered_versions">
        Unregistered worker:
        <div transclude="serviceworker-version-template"></div>
      </div>
    </div>
    <div id="serviceworker-options-template">
      <div class="checkbox">
        <label>
            <input type="checkbox" class="debug_on_start"
                   jsvalues=".checked:$this.debug_on_start">
            <span>
              Open DevTools window and pause JavaScript execution on Service Worker startup for debugging.
            </span>
        </label>
      </div>
    </div>
    <div id="serviceworker-client-template" class="serviceworker-client">
      <div>
        <span>ID: </span><span jscontent="$this.client_id"></span>
      </div>
      <div>
        <span>URL: </span><span jscontent="$this.url"></span>
      </div>
    </div>
  </div>
  <!-- templates end -->
  <h1>ServiceWorker</h1>
  <div class="content">
    <div id="serviceworker-options"></div>
    <div id="serviceworker-list"></div>
  </div>
  <script type="module" src="serviceworker_internals.js"></script>
</body>
</html>
